<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
body,html{width:100%;height: 100%;}
*{margin:0;padding:0;}
ul,li{list-style:none;}
.section{padding:15px 0;}
h1{text-align: center;padding:5px 0;font-size:30px;}
h2{font-size:20px;}
h3{margin-bottom:10px;text-indent: 2em;font-size:16px;}
.parent{background-color: #ccc;height:45px;}
.child{background-color: #333;color:#fff;line-height: 45px;padding:0 5px;}
.parent1{text-align: center;}
.child1{display: inline-block;}
.parent2{}
.child2{display: table;margin:0 auto;}
.parent3{position: relative;}
.child3{position: absolute;left:50%;transform: translateX(-50%);}
.parent4{display: flex;justify-content: center;}

.parentVertical{width:60px;height:400px;background-color: #ccc;}
.parent5{display: table-cell;vertical-align: middle;}
.parent6{position: relative;}
.child6{position: absolute;transform: translateY(-50%);top:50%;}
.parent7{display: flex;align-items:center;}

.parentT{height:200px;background-color: #ccc;width:500px;}
.parent8{text-align: center;display: table-cell;vertical-align: middle;}
.child8{display: inline-block;}
.parent9{position: relative;}
.child9{position: absolute;transform: translate(-50%,-50%);top:50%;left:50%;}
.parent10{display: flex;align-items: center;justify-content: center;}

.itemLst{border:1px dashed #ccc;display: flex;align-items: flex-end;margin-bottom: 20px;justify-content: center}
.item{width:100px;}
</style>
</head>
<body>
	<h1>CSS布局DEMO——居中布局</h1>		
	<h2>水平居中布局</h2>
	<div class="section">
		<h3>inline-block + text-align</h3>
		<div class="parent1 parent">
			<div class="child1 child">demo</div>
		</div>
	</div>
	<div class="section">
		<h3>table + margin</h3>
		<div class="parent2 parent">
			<div class="child2 child">demo</div>
		</div>
	</div>
	<div class="section">
		<h3>absolute + transform</h3>
		<div class="parent3 parent">
			<div class="child3 child">demo</div>
		</div>
	</div>
	<div class="section">
		<h3>flex + justify-content</h3>
		<div class="parent4 parent">
			<div class="child4 child">demo</div>
		</div>
	</div>
	<h2>垂直居中布局</h2>
	<div class="section">
		<h3>table-cell + vertical-align</h3>
		<div class="parent5 parentVertical">
			<div class="child5 child">demo</div>
		</div>
	</div>
	<div class="section">
		<h3>absolute + tranform</h3>
		<div class="parent6 parentVertical">
			<div class="child6 child">demo</div>
		</div>
	</div>
	<div class="section">
		<h3>flex + align-items</h3>
		<div class="parent7 parentVertical">
			<div class="child7 child">demo</div>
		</div>
	</div>
	<h2>水平垂直居中布局</h2>
	<div class="section">
		<h3>inline-block + text-align + table-cell + vertical-align</h3>
		<div class="parent8 parentT">
			<div class="child8 child">demo</div>
		</div>
	</div>
	<div class="section">
		<h3>absolute + transform</h3>
		<div class="parent9 parentT">
			<div class="child9 child">demo</div>
		</div>
	</div>
	<div class="section">
		<h3>flex + justify-content + align-items</h3>
		<div class="parent10 parentT">
			<div class="child10 child">demo</div>
		</div>
	</div>
	<h2>水平底部对齐布局</h2>
	<ul class="itemLst">
		<li class="item" style="height:50px;background-color: red"></li>
		<li class="item" style="height:100px;background-color: yellow"></li>
		<li class="item" style="height:200px;background-color: blue"></li>
		<li class="item" style="height:70px;background-color: green"></li>
	</ul>
</body>
</html>